<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-upload
          class="upload-demo"
          ref="file"
          action="/lejuAdmin/material/uploadFileOssSave"
          :headers="{ token: fileToken }"
          :on-success="fileSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <el-row class="row">
        <el-col class="col" :span="4" v-for="item in list" :key="item.id">
          <el-card>
            <div>创建时间:{{ item.createTime }}</div>
            <img :src="item.ossUrl" class="image" />
            <div style="padding: 14px" class="btn">
              <el-button type="danger" @click="del(item)">删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="start"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="full"
        >
        </el-pagination>
      </div>
    </el-card>
    <buttomBanner></buttomBanner>
  </div>
</template>

<script>
import {
  findMaterialByPage,
  delMaterial,
} from "@/api/content/material/material.js";
import { getToken } from "@/utils/auth.js";
import buttomBanner from "@/components/buttomBanner";
export default {
  data() {
    return {
      start: 1,
      limit: 10,
      full: 0,
      list: [],
    };
  },
  components: {
    buttomBanner
  },
  computed: {
    fileToken() {
      return getToken();
    },
  },
  methods: {
    //   文件上传成功
    fileSuccess(file) {
      if (file.success) {     
        this.$refs.file.clearFiles();
        this.init();
        this.$message.success("上传成功")
      }else{
          this.$message.error(file.message)
      }
    },
    init() {
      findMaterialByPage(this.start, this.limit).then((res) => {
        console.log(res);
        if (res.success) {
          this.full = res.data.total;
          this.list = res.data.rows;
        }
      });
    },
    handleSizeChange(res) {
      this.limit = res;
      this.start = 1;
      this.init();
    },
    // 下一页
    handleCurrentChange(res) {
      this.start = res;
      this.init();
    },
    del(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          console.log(res);
          if (res == "confirm") {
            delMaterial(row.id).then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.init();
              }
            });
          }
        })
        .catch((res) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.top-text {
  margin-top: 10px;
}
.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.col {
  width: 20%;
  padding: 0 20px 20px;
  box-sizing: border-box;
}
.image {
  width: 185px;
  height: 250px;
  display: block;
  margin: 20px auto;
}
.btn {
  text-align: right;
}
.block {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
.el-upload__tip {
  margin-top: 10px;
}
</style>